<template>
  <div class="app-container customer-management-wrap">
    <div class="page-header">
      <div class="page-title">
        <span class="title">公海管理</span>
        <el-input v-model="params.search" placeholder="客户名称/手机/电话" class="search-input">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="btnSearch"></i>
        </el-input>

        <el-select v-model="value" placeholder="请选择" style="width:200px;margin-left: 20px;">
          <el-option v-for="item in options" :key="item.id" :label="item.poolName" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="header-right">
        <el-button type="primary" style="background: #204EC4;" @click="btnSeaSet"><i class="el-icon-plus"
            style="margin-right: 10px;"></i>公海规则设置</el-button>
            <el-button style="padding: 0 !important;" @click="clickImport"><svg-icon icon-class="import" class="import" /></el-button>
        <el-button style="padding: 0 !important;" @click="clickExport"><svg-icon icon-class="exporter" class="import" /></el-button>
      </div>
    </div>
    <div class="shadowShell">
      <div class="search-box">
        <div style="height: 30px;">
          <!-- 删除 -->
          <el-button v-if="showdeleteBtn"
            style="height:32px;margin-right: 10px;color: #5A607F !important;background-color: rgba(243,244,249,0.9) !important;border-radius: 4px !important;border: 1px solid rgba(243,244,249,0.9);"
            @click="deleteRow()">
            <i class="el-icon-delete"></i>
          </el-button>
        </div>

        <div>
          <table-header-filters ref="tableHeaderFilters" @changeState="changeFlagState" @filter-change="filterChange"
            :addType="addType" />
        </div>
      </div>
      <!-- 表格 -->
      <div class="clueTable">
        <clueTable ref="clueTable" @selection-change="handleSelectionChange" :headData="columnList" :tableType="tableType"
          :tableData="tableData" :total="total" @pagination="pagination" @showFilter="showFilter"
          @showDrawer="showDrawerFun" :loadding="loadding">
        </clueTable>
      </div>
    </div>
    <!-- 抽屉 客户info -->
    <customInfoDrawer ref="customInfoDrawer" @saveSubmit="saveSubmit" />
  </div>
</template>
<script>
import customInfoDrawer from '@/components/customerManage/customInfoDrawer/index.vue'
import clueTable from '@/components/clueManage/clues/clueTable'
import TableHeaderFilters from '@/components/FieldFilters/TableHeaderFilters'

import { queryPageList, queryListHead, queryPoolSettingList, queryPoolNameListByAuth, queryPoolFieldConfig, queryPoolNameList, deleteByIds } from "@/api/customer/customerPool";
// import { } from "@/api/customer/common";


export default {
  components: { clueTable, TableHeaderFilters, customInfoDrawer },
  data() {
    return {
      search: "",
      addType: this.$GlobalStatus.tableType.Customer,
      options: [],
      value: '',
      tableData: [],
      tableType: 'noStar',
      columnList: [],
      rowList: [],
      rowIds: [],
      showdeleteBtn: false,
      total: 0,
      params: {
        // pageNum: 1,
        // pageSize: 10,
        // search: "",
        // poolId: "",
        // sceneId: '',
        // label: this.$GlobalStatus.tableType.Customer,
        search: "",
        poolId: "",
        sceneId: 1,
        label: 2,
        // sortField: "1",
        // order:1,
        pageNum: 1,
        pageSize: 15,
        loadding:true
      },
    };
  },
  mounted() {
    this.queryListHead();
    this.queryList();
    // this.getData();

  },
  methods: {
    // 换页
    pagination(pageNum) {
      this.params.pageNum = pageNum;
      this.queryList();
    },
    // 筛选
    showFilter(row) {
      this.$refs.tableHeaderFilters.showFilterClick(row);
    },
    // 搜索框查询
    btnSearch() {
      this.queryList();
    },
    //删除row
    deleteRow(id) {
      console.log(this.rowList)
      let title = "确定删除选中数据吗?";
      if (id) {
        title = "确定删除该数据吗?";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let params = {
            ids: this.rowIds
          }
          let loading = undefined
          if (id) {
            params.ids = [id]
            loading = this.$loading({
              lock: true,
              text: 'Loading',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
          }
          deleteByIds(params).then(res => {
            this.loading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            if (id) {
              params.ids = [id];
              this.$refs.customInfoDrawer.close();
            }
            if (loading) {
              loading.close();
            }
            // this.RefreshAddress();
          }).catch(error => {
            this.loading = false;
            if (loading) {
              loading.close();
            }
          });
        })
        .catch(() => {
          this.loading = false;
          //   this.$message({
          //     type: 'info',
          //     message: '已取消删除'
          //   });
        });
    },
    // 查询列表
    queryList() {
      queryPageList(this.params).then(res => {
        this.tableData = res.data.records;
        this.total = Number.parseInt(res.data.total);
        this.loadding =false
        console.log("tableData------", this.tableData);
      }).catch(error => {
        this.loading = false;

      });
    },
    // 查询表头
    queryListHead() {
      // 获取默认公海
      queryPoolNameListByAuth().then(res => {
        this.options = res.data;
        if (this.options.length > 0) {
          this.params.poolId = this.options[0].id;
          this.value = this.params.poolId;
          this.getData();
          console.log('888888888', this.value)
          console.log('-----------', this.options)
        }
        // 查询表头
        queryListHead(this.value).then(res => {
          console.log('999999999', this.value)
          this.columnList = res.data;
        }).catch(error => {
        });
      }).catch(error => {

      })
    },
    // 未知Todo
    getData() {
      console.log('1234567890', this.value)
      queryPoolFieldConfig(this.value).then(res => {
        // this.columnList = res.data;
      }).catch(error => {

      })
    },
    // 处理选中 删除前置
    handleSelectionChange(val) {
      this.rowList = val
      if (val.length > 0) {
        this.showdeleteBtn = true
      } else {
        this.showdeleteBtn = false
      }
      this.rowIds = [];
      this.rowList.forEach(element => {
        this.rowIds.push(element.id)
      });
    },
    // 保存提交
    saveSubmit(params) {
      if (params.entity.id) {
        update(params).then(res => {
          this.$refs.customInfoDrawer.closeAddFun();
          this.queryList();
        }).catch(error => {
          this.$refs.addDialog.closeLoading();
        })

      } else {
        addCustomer(params).then(res => {
          this.$refs.addDialog.closeFun();
          this.queryList();
        }).catch(error => {
          this.$refs.addDialog.closeLoading();
        })
      }
    },
    btnSeaSet() {
      this.$router.push({ path: "/system/set" })
    },
    // 点击客户名称
    showDrawerFun(rowData) {
      this.$refs.customInfoDrawer.show(rowData);
    },
    //更新下拉状态
    changeFlagState(val) {
      this.openScreen = val
    },
    filterChange(formList) {
      this.params.searchList = formList;
      this.queryList();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/custom-tab-serch.scss";
@import "@/assets/styles/pageStyle.scss";

.shadowShell{
  height: calc(100vh - 160px);
  background-color: #ffffff;
  overflow-y: auto;
}
.customer-management-wrap {

  // .f14{
  //     font-size: 14px;
  // }
  .page-header {
    display: flex;
    justify-content: space-between;

    .page-title {
      display: flex;
      align-items: center;

      .title {
        font-weight: 500;
        font-size: 24px;
        color: #172b4d;
      }

      .title-icon {
        color: #42526e;
        cursor: pointer;
        margin-left: 4px;
        font-size: 16px;
      }
    }

    .header-right {
      .more {
        margin-left: 8px;
      }
    }
  }


  .regular-row {
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    width: 100%;

    .search-input {
      width: 200px;
    }

    .options-wrap {
      margin-left: 24px;
      display: flex;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      align-items: center;

      .options-label {
        margin-right: 8px;
      }
    }
  }

  .activeScene {
    color: #fff;
    background-color: #344563;
  }

  .senior-scene {
    margin-top: 8px;
    padding: 16px;
    box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25),
      0 0 1px rgba(9, 30, 66, 0.31);

    .senior-scene-title {
      color: #5e6c84;
    }

    .senior-scene-btn-wrap {
      margin-top: 10px;
    }

  }
}
</style>